<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <#include "/comm/include-jquery.ftl"/>
    <#include "/comm/include-layui.ftl"/>
    <link rel="stylesheet" href="${(request.contextPath)!}/assets/css/xadmin.css?${.now}" media="all">
    <link rel="stylesheet" href="${(request.contextPath)!}/assets/css/center.css?${.now}" media="all">
</head>
<body>
<div class="layui-fluid">
    <div class="layui-row layui-col-space15">

        <div class="layui-col-sm6 layui-col-md3">
            <div class="layui-card">
                <div class="layui-card-header">
                    总用户数
                    <span class="layui-badge layui-bg-cyan layuiadmin-badge"></span>
                </div>
                <div class="layui-card-body layuiadmin-card-list">
                    <p class="layuiadmin-normal-font">${info.totalUsers!0}</p>
                </div>
            </div>
        </div>

        <div class="layui-col-sm6 layui-col-md3">
            <div class="layui-card">
                <div class="layui-card-header">
                    激活账号
                    <span class="layui-badge layui-bg-blue layuiadmin-badge"></span>
                </div>
                <div class="layui-card-body layuiadmin-card-list">
                    <p class="layuiadmin-normal-font">${info.enabledUsers!0}</p>

                </div>
            </div>
        </div>
        <div class="layui-col-sm6 layui-col-md3">
            <div class="layui-card">
                <div class="layui-card-header">
                    禁用账号
                    <span class="layui-badge layui-bg-green layuiadmin-badge"></span>
                </div>
                <div class="layui-card-body layuiadmin-card-list">
                    <p class="layuiadmin-normal-font">${info.disabledUsers!0}</p>
                </div>
            </div>
        </div>
        <div class="layui-col-sm6 layui-col-md3">
            <div class="layui-card">
                <div class="layui-card-header">
                    总文件数
                    <span class="layui-badge layui-bg-orange layuiadmin-badge"></span>
                </div>
                <div class="layui-card-body layuiadmin-card-list">
                    <p class="layuiadmin-normal-font">${info.totalFileNumber!0}</p>
                </div>
            </div>
        </div>
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-header">
                    文件信息概览
                </div>
                <div class="layui-card-body">
                    <div class="layui-row layui-col-space10">

                        <div class="layui-col-xs12 layui-col-sm2">
                            <div class="layuiadmin-card-text layuiadmin-card-list">
                                <p class="layuiadmin-normal-font">${info.imageNumber!0}</p>
                                <p>
                                    图片文件
                                    <span class="layuiadmin-span-color"><i
                                                class="layui-inline layui-icon layui-icon-picture-fine"></i></span>
                                </p>
                            </div>
                        </div>
                        <div class="layui-col-xs12 layui-col-sm2">
                            <div class="layuiadmin-card-text layuiadmin-card-list">
                                <p class="layuiadmin-normal-font">${info.audioNumber!0}</p>
                                <p>
                                    音频文件
                                    <span class="layuiadmin-span-color"><i
                                                class="layui-inline layui-icon layui-icon-music"></i></span>
                                </p>
                            </div>
                        </div>
                        <div class="layui-col-xs12 layui-col-sm2">
                            <div class="layuiadmin-card-text layuiadmin-card-list">
                                <p class="layuiadmin-normal-font">${info.videoNumber!0}</p>
                                <p>
                                    视频文件
                                    <span class="layuiadmin-span-color"><i
                                                class="layui-inline layui-icon layui-icon-video"></i></span>
                                </p>
                            </div>
                        </div>
                        <div class="layui-col-xs12 layui-col-sm2">
                            <div class="layuiadmin-card-text layuiadmin-card-list">
                                <p class="layuiadmin-normal-font">${info.docNumber!0}</p>
                                <p>
                                    文档文件
                                    <span class="layuiadmin-span-color"><i
                                                class="layui-inline layui-icon layui-icon-file-b"></i></span>
                                </p>
                            </div>
                        </div>
                        <div class="layui-col-xs12 layui-col-sm2">
                            <div class="layuiadmin-card-text layuiadmin-card-list">
                                <p class="layuiadmin-normal-font">${info.rarNumber!0}</p>
                                <p>
                                    压缩包
                                    <span class="layuiadmin-span-color"><i
                                                class="layui-inline layui-icon layui-icon-folder"></i></span>
                                </p>
                            </div>
                        </div>
                        <div class="layui-col-xs12 layui-col-sm2">
                            <div class="layuiadmin-card-text layuiadmin-card-list">
                                <p class="layuiadmin-normal-font">${info.otherNumber!0}</p>
                                <p>
                                    其他
                                    <span class="layuiadmin-span-color"><i
                                                class="layui-inline layui-icon layui-icon-flag"></i></span>
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-card">
                <div class="layui-card-header">近一个月用户登陆数统计</div>
                <div class="layui-card-body">
                    <div id="deathNumberThirtyList" style="width:auto;height:400px;">

                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript" src="${(request.contextPath)!}/assets/js/echarts.min.js"></script>
<script type="text/javascript">
    var dataThirty = [], deathNumber = []
    <#list info.datys as row>
    dataThirty.push("${row}")
    </#list>
    <#list info.deathNumberList as row>
    deathNumber.push("${row}")
    </#list>

    // 基于准备好的dom，初始化echarts实例
    var deathNumberThirtyChart = echarts.init(document.getElementById('deathNumberThirtyList'));
    // 指定图表的配置项和数据
    var deathNumberThirtyOption = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                crossStyle: {
                    color: '#999'
                }
            }
        },
        xAxis: {
            data: dataThirty,
            type: 'category',
            axisLabel: {
                formatter: function (value) {
                    // 设置最大显示长度
                    var maxLength = 4;
                    // 如果文字长度超过最大长度，则进行截断并添加省略号
                    if (value.length > maxLength) {
                        return value.substring(5, value.length);
                    } else {
                        // 如果没有超过最大长度，则正常显示
                        return value;
                    }
                },
                interval: 0,
                margin: 15,
                rotate: 45 // 调整倾斜角度
            },
            axisTick: {
                show: false
            },

            axisLine: {
                onZero: false,
            }
        },

        yAxis: {
            min: 0,
            splitNumber: 5,
            max: ${info.deathNumberMax}
        },
        series: [
            {
                type: 'line',
                smooth: true,
                data: deathNumber,
                itemStyle: {
                    color: '#35BDB2' // 红色
                },
                tooltip: {
                    valueFormatter: function (value) {
                        return "用户数量：" + value;
                    }
                }
            }
        ]
    };
    // 使用刚指定的配置项和数据显示图表。
    deathNumberThirtyChart.setOption(deathNumberThirtyOption);
</script>
</body>
</html>